<template>
	<view class="col padding">
		<view class="row-between-center">
			<view class="avater-box" @click="gousers">
			</view>
				<view class="name">用户名</view>
				<view class="bg-notice">
				<image src="../../static/images/notice_white.png" class="notice-icon" @click="goNotice"></image>
			</view>
			
		</view>
		
		<view class="content">
			<view class="balance margin">
				<view class="balance1">
					余额
				</view>
				<view class="row-end balance2">
					¥ {{userInfo.balanceMoney||0}}
				</view>
			</view>
			
			<view class="row-arround" style="margin-top: 20px;">
					<view class="col" @click="goCharge">
						<view class="three-item">
							<image src="../../static/images/charge.png" class="cash-img"></image>
						</view>
						<view class="cash">充值</view>
					</view>
				<view class="col" @click="goWithdraw">
					<view class="three-item">
						<image src="../../static/images/withdraw.png" class="cash-img"></image>
					</view>
					<view class="cash">取现</view>
				</view>
				<view class="col" @click="goBills">
					<view class="three-item">
						<image src="../../static/images/bill.png" class="cash-img"></image>
					</view>
					<view class="cash">账单</view>
				</view>
			</view>
			
		
	<view class="goods margin">
		<view class="row-between" @click="goOrder(0)">
			<view class="order">我的订单</view>
			<view class="order">全部</view>	
		</view>
		<view class="row-center">
				<view class="line2"></view>
		</view>
	
		<view class="row-arround">
			<view class="col-center" @click="goOrder(1)">
				<image src="../../static/images/mine_wait.png" class="money"></image>
				<view>待发货</view>
			</view>
			<view class="col-center" style="margin-left: 40px;" @click="goOrder(2)">
				<image src="../../static/images/mine_gift.png" class="money"></image>
				<view>待收货</view>
			</view>
			<view class="col-center" style="margin-left: 40px;">
				<image src="../../static/images/mine_service.png" class="money"></image>
				<view>售后</view>
			</view>
		</view>

	</view>
	
	<view class="other margin" style="margin-bottom: 100px;margin-top: 10px;">
		<view class="row-h-center" style="margin-top: 20px;" @click="goRecord">
			<view class="history">
				<image src="../../static/images/history.png" class="history-icon"></image>
			</view>
			<view class="other-text">浏览历史</view>
		</view>
		<view class="line"></view>
		<view class="row-h-center" style="margin-top: 38px;"  @click="goAttend">
			<image src="../../static/images/iconPark-like.svg" class="forcuse"></image>
			<view class="other-text">我的关注</view>
		</view>
		<view class="line"></view>
		<view class="row-h-center" style="margin-top: 38px;" @click="goCollect">
			<image src="../../static/images/fa-star.svg" class="forcuse"></image>
			<view class="other-text">我的收藏</view>
		</view>
		<view style="height: 20px;"></view>
	</view>
			
		</view>
		
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		getInfo
	} from '@/api/change/index.js'
	export default {
		data() {
			return {
				name: this.$store.state.user.name,
				// version: getApp().globalData.config.appInfo.version,
				userInfo:{balanceMoney:0}
			}
		},
		computed: {},
		onLoad() {
			this.getInfoM()
		},
		methods: {
			getInfoM(){
				getInfo({
				}).then(res => {
					console.log('getInfo',res.data)
					this.userInfo = res.data
				})
			},
			gousers(){
				uni.navigateTo({
					url:'/pages/mine/users'
				})
			},
			goCollect(){
				uni.navigateTo({
					url:'/pages/mine/collects'
				})
			},
			goAttend(){
				uni.navigateTo({
					url:'/pages/mine/attends'
				})
			},
			goRecord(){
				uni.navigateTo({
					url:'/pages/mine/records'
				})
			},
			goOrder(type){
				uni.navigateTo({
					url:'/pages/mine/orders?type='+type
				})
			},
			goCharge(){
				uni.navigateTo({
					url:'/pages/mine/charge'
				})
			},
			goWithdraw(){
				uni.navigateTo({
					url:'/pages/mine/withdraw'
				})
			},
			goBills(){
				uni.navigateTo({
					url:'/pages/mine/bills'
				})
			},
			goItem(){
				uni.navigateTo({
					url:'/pages/mine/records'
				})
			},
			goNotice(){
				uni.navigateTo({
					url:'/pages/mine/msg'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}
	.line{
		margin-top: 15px;
		width: 100px;
		height: 0.5px;
		background-color: #bbbbbb;
	}
	.line2{
		margin-top: 15px;
		margin-bottom: 15px;
		width: 150px;
		height: 0.5px;
		background-color: #bbbbbb;
	}
	.content{
		margin-top: 30px;
		background-color: #93D2F3 ;
		display: flex;
		flex-direction: column;
		border-radius: 50rpx;
		border: 3px solid #101010 ;
	}
	.cash{
		margin-top: 5px;
		color: white;
		font-size: 20px;
		text-align: center;
		font-family: HappyZcool-2016;
	}
	.padding {
		margin-top: 10px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.margin{
		margin-left: 20px;
		margin-right: 20px;
	}
	.name {
		color: rgba(79, 79, 79, 1);
		font-size: 36px;
		text-align: center;
		font-family: HappyZcool-2016;
	}

	.menu {
		width: 50px;
		height: 50px;
	}

	.balance {
		margin-top: 20px;
		padding: 17px 25px 5px 25px;
		border-radius: 15px;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		border: 3px solid #4F4F4F ;

		.balance1 {
			color: rgba(16, 16, 16, 1);
			font-size: 18px;
			text-align: left;
			font-family: HappyZcool-2016;
		}

		.balance2 {
			color: rgba(16, 16, 16, 1);
			font-size: 36px;
			text-align: left;
			font-family: HappyZcool-2016;
			
		}
	}

	.money {
		width: 30px;
		height: 30px;
	}
	.cash-img{
		width: 40px;
		height: 40px;
	}
	.goods {
		padding: 15px 19px;
		background-color: white;
		margin-top: 35px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 120px;
		line-height: 20px;
		border-radius: 25px;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		font-family: Arial;
		border: 3px solid rgba(79, 79, 79, 1);
	}
	
	.other{
		background-color: white;
		margin-top: 40px;
		border-radius: 25px;
		display: flex;
		flex-direction: column;
		align-items: center;
		border: 3px solid rgba(79, 79, 79, 1);
	}
	
	.other-text{
		margin-left: 10px;
		color: rgba(16, 16, 16, 1);
		font-size: 28px;
		text-align: center;
			font-family: HappyZcool-2016;
	}
	
	.item{
		display: flex;
		flex-direction: column;
		width: 140px;
		height: 140px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		border: 3px solid rgba(79, 79, 79, 1);
		.item-img{
			width: 70px;
			height: 70px;
		}
		.item-text{
			margin-top: 30px;
			color: rgba(16, 16, 16, 1);
			font-size: 20px;
			text-align: right;
			font-family: HappyZcool-2016;
		}
	}
	
	.bg-notice{
		width: 50px;
		height: 50px;
		line-height: 20px;
		border-radius: 20px;
		background-color: rgba(244, 206, 152, 1);
		text-align: center;
		border: 3px solid rgba(79, 79, 79, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.notice-icon{
		width: 40px;
		height: 40px;
	}
	.three-item{
		width: 60px;
		height: 60px;
		line-height: 20px;
		border-radius: 20px;
		background-color: rgba(41, 179, 192, 1);
		text-align: center;
		border: 3px solid rgba(79, 79, 79, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.history{
		border-radius: 50%;
		width: 40px;
		height: 40px;
		line-height: 20px;
		background-color: rgba(63, 183, 232, 1);
		text-align: center;
		border: 3px solid rgba(79, 79, 79, 1);
		align-items: center;
		display: flex;
		justify-content: center;
	}
	.history-icon{
		width: 24px;
		height: 24px;
	}
	.forcuse{
		width: 40px;
		height: 40px;
	}
	.avater-box{
		width: 50px;
		height: 50px;
		border-radius: 15px;
		border: 3px solid rgba(79, 79, 79, 1);
	}
	.order{
		color: rgba(79, 79, 79, 1);
		font-size: 20px;
		text-align: left;
			font-family: HappyZcool-2016;
	}
</style>